<template>
  <div class="infoView">
    <el-dialog
      title="预警记录"
      :visible.sync="dialogVisibles"
      width="500px"
      height="500px"
      :before-close="handleClose"
    >
      <div
        class="block"
        :style="{ maxHeight: HeightTable + 'px' }"
        v-loading="loading"
      >
        <div v-for="(item, index) in earlyArr" :key="index" class="ss">
          <!-- {{ JSON.parse(item.handleJson) }} -->
          <div v-if="item.handleType == 2">
            <div v-if="JSON.parse(item.handleJson).warnImageList.length > 0">
              <strong>核实预警信息:</strong>
              <div>
                <el-image
                  style="width: 100px; height: 100px"
                  :src="JSON.parse(item.handleJson).warnImageList[0]"
                  fit="fill"
                  :preview-src-list="JSON.parse(item.handleJson).warnImageList"
                ></el-image>
              </div>
            </div>
            <div>
              <strong>是否被骗:</strong>
              {{ JSON.parse(item.handleJson).cheat }}
            </div>
            <div>
              <strong>被骗类型:</strong>
              {{ JSON.parse(item.handleJson).selectedCheat }}
            </div>
            <div>
              <strong>是否规范劝阻话术用语:</strong>
              {{ JSON.parse(item.handleJson).talk }}
            </div>
            <div>
              <strong>转账记录:</strong>
              <div>
                <el-image
                  style="width: 100px; height: 100px"
                  :src="JSON.parse(item.handleJson).moneyImageList[0]"
                  fit="fill"
                  :preview-src-list="JSON.parse(item.handleJson).moneyImageList"
                ></el-image>
              </div>
            </div>
            <div>
              <strong>可疑交友、网恋等聊天记录:</strong>
              <div>
                <el-image
                  style="width: 100px; height: 100px"
                  :src="JSON.parse(item.handleJson).loveImageList[0]"
                  fit="fill"
                  :preview-src-list="JSON.parse(item.handleJson).loveImageList"
                ></el-image>
              </div>
            </div>
            <div>
              <strong>可疑APP或可疑网站:</strong>
              <div>
                <el-image
                  style="width: 100px; height: 100px"
                  :src="JSON.parse(item.handleJson).appImageList[0]"
                  fit="fill"
                  :preview-src-list="JSON.parse(item.handleJson).appImageList"
                ></el-image>
              </div>
            </div>
            <div>
              <strong>国家反诈中心APP:</strong>
              <div>
                <el-image
                  style="width: 100px; height: 100px"
                  :src="JSON.parse(item.handleJson).fanzhaImageList[0]"
                  fit="fill"
                  :preview-src-list="
                    JSON.parse(item.handleJson).fanzhaImageList
                  "
                ></el-image>
              </div>
            </div>
            <div>
              <strong>扫码关注国家反诈中心视频号:</strong>
              {{ JSON.parse(item.handleJson).fanzha }}
            </div>
            <div>
              <strong>添加社区MJ微信:</strong>
              <div>
                <el-image
                  style="width: 100px; height: 100px"
                  :src="JSON.parse(item.handleJson).policeImageList[0]"
                  fit="fill"
                  :preview-src-list="
                    JSON.parse(item.handleJson).policeImageList
                  "
                ></el-image>
              </div>
            </div>
            <div>
              <strong>涉诈信息告知:</strong>
              {{ JSON.parse(item.handleJson).shezha }}
            </div>
            <div>
              <strong>添加反诈宣传群:</strong>
              <div>
                <el-image
                  style="width: 100px; height: 100px"
                  :src="JSON.parse(item.handleJson).teamImageList[0]"
                  fit="fill"
                  :preview-src-list="JSON.parse(item.handleJson).teamImageList"
                ></el-image>
              </div>
            </div>
            <div>
              <strong>苹果手机Facetime功能:</strong>
              <div>
                <el-image
                  style="width: 100px; height: 100px"
                  :src="JSON.parse(item.handleJson).appleImageList[0]"
                  fit="fill"
                  :preview-src-list="JSON.parse(item.handleJson).appleImageList"
                ></el-image>
              </div>
            </div>
          </div>
          <div v-else>
            <!-- {{ JSON.parse(item.handleJson) }} -->
            <div>
              <strong>预警人住址:</strong>
              <div>
                <el-image
                  style="width: 100px; height: 100px"
                  :src="JSON.parse(item.handleJson).warnImageList[0]"
                  :fit="fit"
                  :preview-src-list="JSON.parse(item.handleJson).warnImageList"
                ></el-image>
              </div>
            </div>
            <div>
              <strong>电话联系预警人是否居住在本辖区:</strong>
              {{ JSON.parse(item.handleJson).isPhone }}
            </div>
            <div>
              <strong>是否上报指挥室二次研判:</strong>
              {{ JSON.parse(item.handleJson).isTop }}
            </div>
            <div>
              <strong
                >不在本市且24小时内无法返回的，是否通过视频或电话展开劝阻:</strong
              >
              {{ JSON.parse(item.handleJson).isBack }}
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- <el-dialog title="预警记录" :visible.sync="dialogVisibles" width="500px" :before-close="handleClose">
            <div class="block" :style="{ maxHeight: HeightTable + 'px' }">
                <el-timeline>
                    <el-timeline-item v-for="(item, index) in infoList" :key="index">
                        <el-card>
                            <div class="title">
                                <div class="name">{{ item.name }}</div>
                                <div class="time">{{ item.time }}</div>
                            </div>
                            <div class="content">
                                <div class="infoDom">
                                    类型：{{ item.type }}
                                </div>
                                <div class="infoDom">
                                    地址：{{ item.address }}
                                </div>
                                <div class="infoDom">
                                    情况描述：{{ item.info }}
                                </div>
                                <div class="status"
                                    :class="{ 'status0': item.status == 0, 'status1': item.status == 1 }">

                                </div>
                            </div>

                            <div class="callRecord" v-if="item.status == 1">
                                <div class="callRecordTitle">
                                    出警记录
                                </div>
                                <el-card v-for="(items, index) in item.callRecord" :key="index"
                                    style="margin-top: 10px;">
                                    <div class="callRecordItem">
                                        <div class="icon">
                                            <i class="el-icon-tickets"></i>
                                        </div>
                                        <div class="name">{{ items.name }}</div>
                                        <div class="status"
                                            :class="{ 'status0': items.status == 0, 'status1': items.status == 1 }">{{
                                                items.status == 0 ? '未处理' : '已处理' }}</div>
                                        <div class="time">{{ items.time }}</div>
                                    </div>
                                </el-card>
                            </div>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </div>
        </el-dialog> -->
  </div>
</template>
<script>
import { getDetailById } from "@/api/counterfraud";
export default {
  data() {
    return {
      earlyRuleForms: {
        one: "",
        two: "",
        three: "",
        four: "",
      },
      //修改内容
      earlyRuleForm: {
        information: "",
        is_scammed: "",
        scam_type: "",
        is_standard_script: "",
        transfer_record: "",
        suspicious_chat_records: "",
        suspicious_apps_or_websites: "",
        national_anti_fraud_app: "",
        scan_follow_video_account: "",
        add_community_wechat: "",
        fraud_info_notification: "",
        add_anti_fraud_group: "",
        facetime_function: "",
      },
      HeightTable: window.innerHeight - 20,
      dialogVisibles: false,
      infoList: [
        {
          name: "第一次预警",
          time: "2023-12-12 12:12:12",
          type: "资金端",
          address: "上海市松江区沪亭南路",
          info: "诈骗",
          callRecord: [
            {
              name: "第一次出警记录",
              time: "2023-12-12 12:12:12",
              status: 0,
            },
            {
              name: "第二次出警记录",
              time: "2023-12-12 12:12:12",
              status: 1,
            },
          ],
          status: 1,
        },
        {
          name: "第一次预警",
          time: "2023-12-12 12:12:12",
          type: "资金端",
          address: "上海市松江区沪亭南路",
          info: "诈骗",
          callRecord: [],
          status: 0,
        },
      ],
      status: null,
      loading: false,
      earlyArr: [],
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    init(id) {
      this.loading = true;
      getDetailById(id).then((res) => {
        //赋状态
        this.status = res.data.status;
        if (res.data.status == "2") {
          this.dialogVisibles = true;
        } else {
          this.dialogVisibles = false;
          this.$message({
            message: "待劝阻",
            type: "warning",
          });
        }
        this.loading = false;
        this.earlyArr = res.data.warnHandleList;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.block {
  overflow: hidden;
  //   padding: 10px 0;
  margin-top: -10px;
  div {
    // margin-top: 10px;
    font-size: 14px;
  }
}
.block ::v-deep.el-carousel__item {
  overflow-y: auto;
  box-sizing: border-box;
  div {
    margin-top: 10px;
  }
  // 自定义滚动条样式
  &::-webkit-scrollbar {
    width: 3px; // 滚动条宽度
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1; // 滚动条轨道背景
  }

  &::-webkit-scrollbar-thumb {
    background: #888; // 滚动条滑块背景
    border-radius: 4px; // 滚动条滑块圆角
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #555; // 滚动条滑块悬停时的背景
  }
}
.infoView ::v-deep .el-timeline {
  //   margin-left: -40px;
}
.infoView ::v-deep .el-dialog .el-dialog__body .ss {
  height: 600px;
  overflow-y: auto;
  //   box-sizing: border-box;
  padding: 0 0 20px 20px;
  div {
    margin-top: 10px;
  }
  // 自定义滚动条样式
  &::-webkit-scrollbar {
    width: 3px; // 滚动条宽度
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1; // 滚动条轨道背景
  }

  &::-webkit-scrollbar-thumb {
    background: #888; // 滚动条滑块背景
    border-radius: 4px; // 滚动条滑块圆角
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #555; // 滚动条滑块悬停时的背景
  }
}

.title {
  display: flex;
  justify-content: space-between;

  .name {
    font-weight: 700;
  }

  .time {
    color: rgb(125, 128, 130);
  }
}

.content {
  width: 320px;
  box-sizing: border-box;
  padding: 10px;
  position: relative;

  .infoDom {
    margin: 10px 0;
    color: rgb(125, 128, 130);
  }

  .status {
    width: 63px;
    height: 60px;
    position: absolute;
    right: -70px;
    top: 10px;
  }
  .status0 {
    background-image: url("./img/no.jpg");
    background-size: 100% 100%;
  }
  .status1 {
    background-image: url("./img/yes.jpg");
    background-size: 100% 100%;
  }
}

.callRecord {
  .callRecordTitle {
    font-weight: 500;
    font-size: 13px;
  }

  .callRecordItem {
    color: rgb(125, 128, 130);
    display: flex;
    justify-content: space-between;
    line-height: 25px;

    .icon {
      width: 20px;
    }

    .name {
      flex: 1;
    }

    .status {
      width: 60px;
      height: 25px;
      border-radius: 20px;
      text-align: center;
      line-height: 25px;
      margin-right: 10px;
      font-size: 12px;
    }

    .status0 {
      border: 1px solid rgb(245, 216, 186);
      background: rgb(251, 240, 231);
      color: rgb(222, 117, 39);
    }

    .status1 {
      border: 1px solid rgb(200, 232, 195);
      background: rgb(236, 247, 235);
      color: rgb(108, 190, 96);
    }

    .time {
      width: 140px;
    }
  }
}

.callRecord ::v-deep .el-card__body {
  padding: 10px;
}

.infoView ::v-deep .el-dialog {
  margin-top: 40px !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
